@use '@/styles/variables' as *;

.info {
  height: 100%;
  background-color: $primary-background-color;
  padding: 10px;

  // 覆盖表格整体背景和文字颜色
  :global(.ant-table) {
    min-height: 76vh;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important; // 文字白色，轻微透明增强层次感

    a {
      color: #fff;

      &:hover {
        color: #a8d1ff !important; // 悬停时浅蓝色，增强交互感
      }
    }

    // 表格头背景和文字
    :global(.ant-table-thead > tr > th) {
      height: 9vh;
      background: rgba(53, 113, 203, 0.2) !important; // 半透明渐变，避免完全遮挡平台背景
      color: white !important;
      font-weight: bold; // 加粗表头文字
      font-size: 2.6vh;
      border-bottom: 1px solid rgba(65, 141, 246, 0.5) !important;
      border-top: 1px solid rgba(65, 141, 246, 0.5) !important;
    }

    :global(.ant-table-thead>tr>th::before) {
      display: none !important;
    }

    // 表格行背景
    :global(.ant-table-tbody > tr > td) {
      height: 8vh;
      font-size: 2.2vh;
      background: transparent !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; // 调整行边框透明度
    }

    // 鼠标悬停行样式
    :global(.ant-table-tbody > tr:hover > td) {
      background: rgba(255, 255, 255, 0.08) !important; // 更柔和的悬停效果
    }

    // 选中行样式（如果有）
    :global(.ant-table-row-selected) {
      td {
        background: rgba(30, 95, 192, 0.2) !important; // 浅蓝色选中状态
      }
    }
  }

  // 分页器优化（保持透明但可点击）
  :global(.ant-pagination) {
    height: 4vh;
    line-height: 4vh;
    margin: 0 !important;
    align-items: center;

    :global(.ant-pagination-item),
    :global(.ant-pagination-item-link) {
      background: transparent !important;
      color: rgba(255, 255, 255, 0.8) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;

      &:hover {
        border: 1.5px solid #ccc !important;
        color: white !important;
      }

      a {
        color: #fff;
      }
    }

    :global(.ant-pagination-item-active) {
      a {
        color: white !important;
      }

      border: 2px solid #ccc !important;
      border-radius: 5px;
    }
  }


  /* 禁用模糊滤镜 */
  :global(.ant-spin-blur) {
    filter: none !important;
    opacity: 1 !important; // 禁用透明度变化
  }

  /* 移除灰色遮罩 */
  :global(.ant-spin-container::after) {
    background: transparent !important;
  }

  /* 禁用所有过渡动画 */
  .ant-spin-nested-loading,
  :global(.ant-spin-container) {
    transition: none !important;
  }

  /* 旋转图标 */
  :global(.ant-spin-dot) {
    display: none;
  }


  /* 分页跳转 */
  :global(.ant-pagination-options-quick-jumper) {
    height: 4vh;
    line-height: 4vh;
    font-size: 0;

    input {
      width: 30px;
      height: 24px;
      padding: 7px;
      margin: 4px;
    }
  }

  :global(.ant-pagination-options-quick-jumper::before) {
    content: "跳转至";
    display: inline-block;
    width: 50px;
    height: 100%;
    font-size: 16px;
    color: #fff;
  }

  :global(.ant-pagination-options-quick-jumper::after) {
    content: "页";
    display: inline-block;
    width: 10px;
    height: 100%;
    font-size: 16px;
    color: #fff;
  }

  :global(.ant-tag) {
    font-size: 2vh;
    height: 3vh;
    line-height: 3vh;
    text-align: center;
  }

  :global(.ant-btn-primary) {
    height: 3.6vh;
    font-size: 2vh;
  }

}

.top {
  height: 8vh;
  @include flex-between;

  p {
    font-size: 3vh;
    font-weight: bold;
    width: 15vw;
  }

  .search {
    width: 24vw;
    display: flex;
    align-items: center;
    gap: 2vw;
  }

  .btn {
    width: 15vw;
    padding-right: 1vw;
    text-align: right;
  }
}

.formRow {
  display: flex;
  justify-content: space-around;
  gap: 16px;
  margin-bottom: 16px;

  :global(.ant-form-item) {
    width: 45%;
  }
}